<html>
<script src="../../trunk/simpleajax-dev.js"></script>
<style>
body {font:normal 1em Helvetica}
h2, h3 {border:1px dashed #bbb; padding:3px 0.5em}
h3 {font-size:0.8em; font-weight:normal}
a:link, a:visited {color:#00d}
a:hover {color:#66f}
td.section {text-align:center; vertical-align:top; padding:0 0 20px 0; border:1px solid #bbb}
td h3 {margin:1px 1px 20px 1px; padding:3px; background:#eee; color:#777; border:0}

.flip-0-3 {background:red}
.flip-1-3 {background:yellow}
.flip-2-3 {background:green}

#starbox .stars {font-size:1.4em; font-weight:bold; letter-spacing:0.1em}
#starbox a.stars {position:absolute; color:#ccc; z-index:0; text-decoration:none}
#starbox a.stars:hover {_display:block; color:#dd0; z-index:1}

</style>

<div class="section simple">
    <h2>Elementary Examples:</h2>

    <table cellspacing="10" style="border:0px; width:100%">
        <tr>
            <td class="section" style="width:50%">
                <h3><a name="one_button_example"></a>Simple button example</h3>
                <input type="button" rel="get one_button.txt one_button" value="Ping">
                <span id="one_button" style="margin-left:1em"><i style="color:#999">&lt;Click ping&gt;</i></span>
            </td>

            <td class="section" style="width:50%">
                <h3><a name="prog_help_example"></a>Progressive help example</h3>
                <div id="prog_help"><a href="#" rel="get prog_help.txt prog_help">What is knowledge?</a></div>
            </td>
        </tr>

        <tr>
            <td class="section" style="width:50%">
                <h3><a name="captcha_example"></a>CAPTCHA example:</h3>
                <div id="captcha">
                    <img src="captcha.gif" width=113 height=46>
                    <br><small>Enter the text you see above:</small>
                    <br><input type="text" rel="get captcha.txt captcha">
                </div>
                <input type="radio"> Next question
                <br><input type="radio"> Next question
            </td>

            <td class="section" style="width:50%">
                <h3><a name="multi_selects_example"></a>Multi-selects example</h3>
                <table cellspacing="5" cellpadding="0" border="0" align="center">
                    <tr><th>Mode</th><th>From</th><th>To</th></tr>
                    <tr>
                        <td>
                        <select rel="get m_selects.txt m_selects1" size="5" style="width:9em">
                            <option>Plane<option>Train<option>Boat
                            <option>Truck<option>Car<option>Taxi
                        </select>
                        </td>

                        <td>
                        <select id="m_selects1" rel="get m_selects.txt m_selects2" multiple size="5" style="width:9em">
                            <option disabled>(select mode)
                        </select>
                        </td>

                        <td>
                        <select id="m_selects2" multiple size="5" style="width:9em">
                            <option disabled>(select from)
                        </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <td class="section" style="width:50%">
                <h3><a name="one_button_example"></a>Star ratings example</h3>
                <span id="starbox">Rate me:
                    <a href="star.txt?s=5" rel="get starbox" class="stars" title="5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</a
                    ><a href="star.txt?s=4" rel="get starbox" class="stars" title="4 stars">&#9733;&#9733;&#9733;&#9733;</a
                    ><a href="star.txt?s=3" rel="get starbox" class="stars" title="3 stars">&#9733;&#9733;&#9733;</a
                    ><a href="star.txt?s=2" rel="get starbox" class="stars" title="2 stars">&#9733;&#9733;</a
                    ><a href="star.txt?s=1" rel="get starbox" class="stars" title="1 star">&#9733;</a
                    ><u class="stars" style="visibility:hidden">&#9733;&#9733;&#9733;&#9733;&#9733;</u>
                </span>
            </td>

            <td class="section" style="width:50%">
            </td>
        </tr>
    </table>

</div>
<hr>
<div id="output">More later...</div>
<script>
SimpleAjax._getURL = SimpleAjax.getURL;
SimpleAjax.getURL = function() {
  document.getElementById("output").innerHTML = "<tt>Debug: HTTP " + arguments[0] + ", " + arguments[1] + "</tt>";
  SimpleAjax._getURL.apply(SimpleAjax, arguments);
};
</script>

</html>